<template>
    <page-header-wrapper title="新增菜单">
        <a-card :bordered="false">
            <a-form :form="form" v-bind="formLayout" @submit="handleSubmit">
                <a-form-item label="菜单名称">
                    <a-input placeholder="请输入菜单名称"/>
                </a-form-item>
                <a-form-item label="菜单路径">
                    <a-input placeholder="请输入菜单路径"/>
                </a-form-item>
                <a-form-item label="前端组件">
                    <a-input placeholder="请输入前端组件"/>
                </a-form-item>
                <a-form-item label="前端组件">
                    <a-input placeholder="请输入前端组件"/>
                </a-form-item>
                <a-form-item label="父级菜单">
                    <a-cascader :options="options" placeholder="默认跳转地址" />
                </a-form-item>
                <a-form-item label="默认跳转地址">
                    <a-input placeholder="请输入路由参数 redirect"/>
                </a-form-item>
                <a-form-item label="菜单图标">
                    <a-input style="width: 200px">
                        <a-icon slot="addonAfter" type="setting"/>
                    </a-input>
                </a-form-item>
                <a-form-item label="排序">
                    <a-input-number placeholder="请输入菜单排序" style="width: 200px"/>
                </a-form-item>
                <a-form-item label="是否路由菜单">
                    <a-switch checked-children="是" un-checked-children="否" default-checked />
                </a-form-item>
                <a-form-item label="是否缓存路由">
                    <a-switch checked-children="是" un-checked-children="否" />
                </a-form-item>
                <a-form-item label="是否为多页面">
                    <a-switch checked-children="是" un-checked-children="否" />
                </a-form-item>
                <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
                    <a-button htmlType="submit" type="primary">提交</a-button>
                    <a-button style="margin-left: 8px">保存</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </page-header-wrapper>
</template>
<script>
export default {
    data () {
        return {
            confirmDirty: false,
            autoCompleteResult: [],
            formLayout: {
                labelCol: {
                    lg: { span: 7 }, sm: { span: 7 }
                },
                wrapperCol: {
                    lg: { span: 10 }, sm: { span: 17 }
                }
            },
            formData: {
                pid: '',
                path: '',
                name: '',
                component: '',
                redirect: '',
                hidden: '',
                title: '',
                icon: ''
            }
        }
    },
    beforeCreate () {
        this.form = this.$form.createForm(this, { name: 'register' })
    },
    methods: {
        handleSubmit () {}
    }
}
</script>
